<template>
    <div>
        <template v-if="isShow">
            <add-and-edit :isShow="isShow" @result="getList" @cancelShow="cancelShow"></add-and-edit>
        </template>
        <wl-content-top>
            <template slot="header">
                <slot>
                    <Form :model="formItem" :label-width="100">
                                <Button type="primary" @click="add()">增加</Button>
                                <Button type="error">批量删除</Button>
                    </Form>
                </slot>
            </template>
            <template slot="body">
                <Row class="wl-content">
                    <Table border ref="selection" :loading="loading" :columns="tableOptions.tableHead"
                           :data="tableOptions.tableData"
                           class="wl-table"
                    >
                        <template slot-scope="{ row}" slot="xingming">
                            <strong class="wl-pointer">{{ row.user_name }}</strong>
                        </template>
                        <template slot-scope="{ row }" slot="cos">
                            <span v-for="(item,index) in row.roles" :key="index">{{item.name}} </span>
                        </template>
                        <template slot-scope="{ }" slot="action">
                            <Button type="primary" size="small" @click="update()">修改密码</Button>
                        </template>
                    </Table>
                </Row>
                <Modal
                        v-model="updatemodal"
                        title="修改密码"
                        @on-ok="ok"
                        @on-cancel="cancel">
                    <Form :model="formItemupdate" :label-width="80">
                        <FormItem label="原密码">
                            <Input v-model="formItemupdate.oldpass"></Input>
                        </FormItem>
                        <FormItem label="新密码">
                            <Input v-model="formItemupdate.newpass"></Input>
                        </FormItem>
                    </Form>
                </Modal>
            </template>
        </wl-content-top>
        <!--        <Divider/>-->
        <!--                分页-->
        <!--        <Page :total="pageOptions.totalRecord" show-total @on-change="pageChange" style="margin-left: 1000px"/>-->
    </div>
</template>

<script>
import WlContentTop from '@/components/wl-content-top'
import AddAndEdit from './components/add-and-edit'
import { muser, muserselect, updata } from '@/api/platform'
// import { } from '../../../../api/platform'

export default {
  components: { WlContentTop, AddAndEdit },
  data () {
    return {
      formItemupdate: {
        newpass: '',
        oldpass: ''
      },
      formItem: {
        select: '0',
        selectmsg: ''
      },
      tableOptions: {
        tableHead: [
          {
            width: '50px',
            align: 'center',
            type: 'selection'
          },
          {
            minWidth: 40,
            title: '用户名',
            slot: 'xingming'
          },
          {
            minWidth: 40,
            title: '真实姓名',
            key: 'name'
          },
          {
            minWidth: 40,
            title: '用户类型',
            key: 'type_name'
          },
          {
            minWidth: 100,
            title: '用户角色',
            slot: 'cos'
          },
          {
            minWidth: 40,
            title: '监控地区',
            key: 'city_name'
          },
          {
            minWidth: 40,
            title: '所属机构',
            key: 'org'
          },
          {
            title: '职务',
            key: 'title'
          },
          {
            title: '科室',
            key: 'office'
          },
          {
            minWidth: 80,
            title: '有效开始时间',
            key: 'create_time'
          },
          {
            minWidth: 50,
            title: '有效结束时间',
            key: 'end_time'
          },
          {
            title: '操作',
            slot: 'action',
            width: 100,
            align: 'center'
          }
        ],
        tableData: []
      },
      loading: false,
      updatemodal: false,
      isShow: false,
      typeData: ['无', '普通管理员', '普通用户'],
      param: {
        page: 1
      },
      pageOptions: {
        totalRecord: 0
      }

    }
  },
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    cancelShow () {
      this.isShow = false
    },
    getList () {
      this.loading = true
      muser(this.param).then(ret => {
        this.loading = false
        let results = ret.data.results
        let _this = this
        results.map(item => {
          item.type_name = _this.typeData[item.type]
          item.city_name = _this.getCityName(item.area)
          item.start_time = _this.$common.xeUtils.toDateString(item.start_time, 'yyyy-MM-dd')
          return item
        })
        this.tableOptions.tableData = results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    getCityName (code) {
      let cityData = this.$store.state.app.cityOriginData
      let name = ''
      cityData.forEach(item => {
        if (item.value === code) {
          name = item.label
        }
      })
      return name
    },
    chaxun (e) {
      muserselect({ page: 1, search: e }).then(ret => {
        this.loading = false
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    add () {
      this.isShow = true
      console.log('状态', this.isShow)
    },
    update () {
      this.updatemodal = true
    },
    ok () {
      updata(this.formItemupdate).then(ret => {
        this.formItemupdate = ret.data.results
      })
      this.getList()
    },
    cancel () {
      this.$Message.info('你点击了取消')
    }
  },
  watch: {
    treeSelectData (value) {
      console.log(value, '---')
      this.param.unit_id = value.id
      this.getList()
    }
  }

}
</script>

<style scoped>
    Button {
        margin-right: 15px;
    }

</style>
